<template>
  <view>
    <!-- 侧边任务列表抽屉 -->
    <view class="task-drawer" :class="{'drawer-open': isOpen}">
      <view class="drawer-header">
        <text class="drawer-title">任务列表</text>
        <view class="drawer-close" @click="close">×</view>
      </view>
      
      <scroll-view scroll-y class="drawer-content" v-if="tasks.length > 0">
        <view 
          class="task-item" 
          v-for="(task, index) in tasks" 
          :key="task.id"
          :class="{
            'task-active': task.id === activeTaskId,
            'task-completed': task.status === 'SUCCESS',
            'task-failed': task.status === 'FAILED'
          }"
        >
          <view class="task-info">
            <view class="task-header">
              <text class="task-title">任务 #{{ tasks.length - index }}</text>
              <text class="task-status">{{ getStatusText(task.status) }}</text>
            </view>
            
            <view class="task-details">
              <text class="task-time">{{ task.startTime }}</text>
              <text class="task-duration" v-if="task.duration">{{ task.duration }}</text>
            </view>
          </view>
          
          <!-- 任务结果图片预览 -->
          <view class="task-result-preview" v-if="task.resultImage && task.status === 'SUCCESS'" @click="viewTaskResult(task)">
            <image :src="task.resultImage" mode="aspectFill" class="task-result-image"></image>
          </view>
          
          <view class="task-actions" v-if="task.status === 'SUCCESS'">
            <view class="task-action-btn" @click="viewTaskResult(task)">
              <text class="task-action-text">查看</text>
            </view>
            <view class="task-action-btn" @click="downloadTaskImage(task.resultImage)">
              <text class="task-action-text">下载</text>
            </view>
          </view>
          
          <view class="task-progress" v-if="task.status === 'PENDING' || task.status === 'PROCESSING'">
            <view class="progress-bar">
              <view class="progress-inner" :style="{ width: task.id === activeTaskId ? progressWidth : '20%' }"></view>
            </view>
          </view>
        </view>
        
        <view class="drawer-actions">
          <view class="drawer-action-btn" @click="clearTasks">
            <text class="drawer-action-text">清空历史</text>
          </view>
        </view>
      </scroll-view>
      
      <!-- 任务列表为空时显示提示 -->
      <view class="empty-task-container drawer-empty" v-if="tasks.length === 0">
        <view class="empty-task-icon">📋</view>
        <text class="empty-task-text">暂无任务记录</text>
        <text class="empty-task-tip">上传图片并运行任务后，会在这里显示</text>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="drawer-mask" v-if="isOpen" @click="close"></view>
    
    <!-- 全屏图片预览 -->
    <view class="fullscreen-preview" v-if="previewVisible" @click="closePreview">
      <image :src="previewImageUrl" mode="aspectFit" class="fullscreen-image"></image>
      <view class="preview-close">×</view>
    </view>
    
    <!-- 任务列表按钮 -->
    <view class="task-list-button" @click="open">
      <view class="task-list-icon">
        <view class="task-list-line"></view>
        <view class="task-list-line"></view>
        <view class="task-list-line"></view>
      </view>
      <text class="task-list-text">任务列表</text>
      <text class="task-list-badge" v-if="tasks.length > 0">{{tasks.length}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TaskDrawer',
  props: {
    // 任务历史列表
    tasks: {
      type: Array,
      default: () => []
    },
    // 当前活跃任务ID
    activeTaskId: {
      type: String,
      default: ''
    },
    // 进度条宽度
    progressWidth: {
      type: String,
      default: '20%'
    },
    // 是否显示抽屉
    isOpen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      previewVisible: false,
      previewImageUrl: ''
    };
  },
  methods: {
    // 获取任务状态文本
    getStatusText(status) {
      switch (status) {
        case 'PENDING':
          return '等待中';
        case 'PROCESSING':
          return '进行中';
        case 'SUCCESS':
          return '完成';
        case 'FAILED':
          return '失败';
        default:
          return '未知状态';
      }
    },
    
    // 查看任务结果
    viewTaskResult(task) {
      if (task.resultImage) {
        this.previewImageUrl = task.resultImage;
        this.previewVisible = true;
      }
    },
    
    // 关闭预览
    closePreview() {
      this.previewVisible = false;
      this.previewImageUrl = '';
    },
    
    // 下载任务图片
    downloadTaskImage(imageUrl) {
      if (!imageUrl) return;
      
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 打开抽屉
    open() {
      this.$emit('open');
    },
    
    // 关闭抽屉
    close() {
      this.$emit('close');
    },
    
    // 清空任务历史
    clearTasks() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有任务历史记录吗？',
        confirmColor: '#FF3B30',
        success: (res) => {
          if (res.confirm) {
            this.$emit('clear');
            uni.showToast({
              title: '历史记录已清空',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style>
/* 侧边任务列表抽屉 */
.task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100vh;
  background-color: #FFFFFF;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
}

.drawer-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.drawer-close {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: #21ab86;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
}

.drawer-content {
  padding: 20rpx;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
}

.task-info {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.task-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.task-status {
  font-size: 24rpx;
  color: #5a8a7a;
}

.task-details {
  font-size: 24rpx;
  color: #5a8a7a;
}

.task-result-preview {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  overflow: hidden;
  margin-left: 20rpx;
}

.task-result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-actions {
  display: flex;
  gap: 10rpx;
}

.task-action-btn {
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
}

.task-action-text {
  font-size: 24rpx;
  color: #21ab86;
}

.task-progress {
  width: 100%;
  height: 4rpx;
  background-color: #e1f1ec;
  border-radius: 2rpx;
  margin-top: 10rpx;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

.progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

.drawer-actions {
  display: flex;
  justify-content: center;
  padding: 20rpx;
}

.drawer-action-btn {
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
}

.drawer-action-text {
  font-size: 24rpx;
  color: #21ab86;
}

.empty-task-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}

.empty-task-icon {
  font-size: 48rpx;
  color: #21ab86;
  margin-bottom: 16rpx;
}

.empty-task-text {
  font-size: 28rpx;
  color: #5a8a7a;
  margin-bottom: 8rpx;
}

.empty-task-tip {
  font-size: 24rpx;
  color: #5a8a7a;
}

/* 任务列表按钮 */
.task-list-button {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
  margin-left: 16rpx;
}

.task-list-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: rgba(33, 171, 134, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
}

.task-list-text {
  font-size: 24rpx;
  color: #21ab86;
}

.task-list-badge {
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  background-color: #21ab86;
  color: #FFFFFF;
  font-size: 24rpx;
  margin-left: 10rpx;
}

.task-list-line {
  width: 24rpx;
  height: 2rpx;
  background-color: #21ab86;
  margin: 4rpx 0;
}

.drawer-open {
  transform: translateX(0);
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
}

.drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.drawer-empty {
  justify-content: center;
  align-items: center;
  height: 80vh;
}

/* Task item status specific styles */
.task-active {
  border-left: 4rpx solid #21ab86;
  padding-left: 16rpx;
  background: linear-gradient(to right, #f5faf8 0%, #ffffff 100%);
}

.task-completed {
  border-left: 4rpx solid #21ab86;
  padding-left: 16rpx;
}

.task-failed {
  border-left: 4rpx solid #ff3b30;
  padding-left: 16rpx;
}

/* Fullscreen preview */
.fullscreen-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-image {
  max-width: 100%;
  max-height: 90vh;
}

.preview-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 40rpx;
  line-height: 56rpx;
  text-align: center;
}
</style> 